<template>
  <div class="Foundation">
    <div class="top">
      <el-card class="box-card">
        <el-form :inline="true" class="demo-form-inline" label-position="right">
          <el-form-item label="课堂名称">
            <el-input placeholder="请输入" value=""></el-input>
          </el-form-item>
          <el-form-item label="所属院校" label-width="150px" prop="region">
            <el-select
              class="select"
              placeholder="请选择"
              style="width: 268px"
              value=""
            >
              <el-option label="区域一" value="shanghai"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="所属院校" label-width="150px" prop="region">
            <el-select
              class="select"
              placeholder="请选择"
              style="width: 268px"
              value=""
            >
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button class="btnsearch" type="primary" size="small">
              <span
                class="icon iconfont icon-chaxun"
                style="font-size: 15px; font-weight: bold"
                >查询</span
              >
            </el-button>
            <el-button class="btnrest" size="small" icon="el-icon-refresh"
              >重置</el-button
            >
          </el-form-item>
          <el-form-item label="课堂管理">
            <el-date-picker
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <!-- main -->
    <div class="main">
      <div>
        <el-button
          class="btnnew"
          type="primary"
          size="small"
          @click="topicedit"
        >
          <span>创建</span>
        </el-button>
        <el-button class="btnnew" type="primary" size="small" @click="batchDel">
          <span>批量删除</span>
        </el-button>
      </div>
      <div class="bottomMian">
        <el-table
          tooltip-effect="dark"
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50"> </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="lessonsTopicName"
            label="课题名称"
          ></el-table-column>

          <el-table-column
            prop="colleageName"
            label="所属院校"
          ></el-table-column>
          <el-table-column prop="majorName" label="所属专业"></el-table-column>
          <el-table-column prop="className" label="所属班级"></el-table-column>
          <el-table-column
            prop="lessonsTopicType"
            label="课件类型"
          ></el-table-column>
          <!-- <el-table-column
            prop="lessonsTopicType"
            label="课件"
          ></el-table-column> -->
          <el-table-column prop="score" label="学分"></el-table-column>
          <el-table-column label="发布状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#C2C2C2"
                @change="updateIsUsing(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="createBy" label="创建人"></el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180"
          ></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <div class="action">
                <span class="edit">编辑</span>
                <span class="del" @click="handleDel(scope.row.id)">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination" v-if="tableData.length > 0">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="10"
            prev-text="上一页"
            next-text="下一页"
            layout=" prev, pager, next"
            :total="total"
          >
          </el-pagination>
          <div class="jumper">
            跳到第
            <input type="text" ref="currentPage" value="1" />
            页
          </div>
          <button class="submit" @click="goPage">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getListApi, delListApi, updateListApi } from "@/api/topic/topic";
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      total: 0,
      multipleSelection: [],
    };
  },
  created() {
    this.getList({ pageNum: this.pageNum, pageSize: this.pageSize });
  },
  methods: {
    // 获取列表
    getList(data) {
      getListApi(data).then((res) => {
        this.tableData = res.rows.map((item) => {
          return {
            ...item,
            status: item.status == 0 ? false : true,
          };
        });
        this.total = res.total;
      });
    },
    // 添加 / 编辑
    topicedit() {
      this.$router.push({
        path: "/topic/TopicEdit",
      });
    },
    // 删除
    handleDel(ids) {
      this.$confirm("此操作将删除该课题, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delListApi({ ids }).then((res) => {
            if (res.code === 200) {
              this.$message.success("删除成功!");
              this.getList({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
              });
            } else {
              this.$message.error("删除失败!");
            }
          });
        })
        .catch(() => {});
    },

    // 批量删除
    batchDel() {
      if (this.multipleSelection.length) {
        let data = [...this.multipleSelection].map((item) => {
          return "" + item.courseId;
        });
        this.$confirm("此操作将删除已选择的课题, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            delListApi({ ids: data.join(",") }).then((res) => {
              if (res.code === 200) {
                this.$message.success("删除成功!");
                this.getList({
                  pageNum: this.pageNum,
                  pageSize: this.pageSize,
                });
              } else {
                this.$message.error("删除失败!");
              }
            });
          })
          .catch(() => {});
      } else {
        this.$message.error("请选择要删除的课题！");
      }
    },

    // 修改启用状态
    updateIsUsing(data) {
      let { id, status } = data;
      updateListApi({
        id,
        status: !status ? 0 : 1,
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success("修改成功!");
          this.getList({
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          });
        } else {
          this.$message.error("修改失败!");
        }
      });
    },

    // 选择 / 全选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 更改当前页码
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });
    },

    // 跳转当前页
    goPage() {
      let { value } = this.$refs.currentPage;
      this.pageNum = Number(value);
      this.getList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.Foundation {
  width: 100%;
  height: 100%;
  padding: 0 15px 15px;
  display: flex;
  flex-direction: column;
}
.select {
  width: 265px;
}
.btnsearch {
  width: 80px;
  height: 34px;
  background: #56a4d4;
  border-radius: 4px;
  margin-left: 143px;
}
.btnrest {
  width: 80px;
  height: 34px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #979797;
  font-size: 14px;
}
.main {
  background: #ffffff;
  margin-top: 14px;

  .btnnew {
    width: 90px;
    height: 34px;
    background: #56a4d4;
    border-radius: 4px;
    margin: 25px 10px;
  }
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-top: 20px;
  margin-right: 20px;
  padding: 0 0 20px 0;

  .jumper {
    font-size: 14px;
    margin-left: 20px;
    margin-right: 10px;
    display: flex;
    align-items: center;

    input {
      width: 40px;
      height: 26px;
      margin: 0 5px;
      text-align: center;
      border: solid 1px #e6e6e6;
      border-radius: 5px;
      color: #666;
      outline-style: none;
    }
  }

  button {
    height: 28px;
    line-height: 28px;
    border-radius: 5px;
    font-size: 14px;
    padding: 0 8px;
    border: solid 1px #e6e6e6;
    color: #666;
  }

  .submit {
    color: #fff;
    background-color: #4895db;
    border: solid 1px #4895db;
  }
}

.action {
  display: flex;
  align-items: center;
  justify-content: center;
  .edit,
  .del {
    cursor: pointer;
    color: #1990ff;
  }
  .del {
    margin-left: 10px;
  }
}
</style>